<template>
	<view class="smart-container">
		<view class="smart-page-head">
			<view class="smart-page-head-title">Flex布局示例</view>
		</view>

		<view class="smart-padding-wrap">
			<view class="section-title">横向布局</view>
		</view>

		<view class="smart-flex smart-row">
			<view class="flex-item smart-bg-blue">A</view>
			<view class="flex-item smart-bg-red">B</view>
			<view class="flex-item smart-bg-green">C</view>
		</view>

		<view class="section-title">纵向布局</view>
		<view class="smart-flex smart-column">
			<view class="flex-item-100 smart-bg-red">A</view>
			<view class="flex-item-100 smart-bg-blue">B</view>
			<view class="flex-item-100 smart-bg-green">C</view>
		</view>

		<view class="section-title">其他布局</view>
		<view class="other-layouts">
			<view class="text">纵向布局-自动宽度</view>
			<view class="text fixed-width">纵向布局-固定宽度</view>

			<view class="smart-flex smart-row">
				<view class="text">横向布局-自动宽度</view>
				<view class="text">横向布局-自动宽度</view>
			</view>

			<view class="smart-flex smart-row center">
				<view class="text">横向布局-居中</view>
				<view class="text">横向布局-居中</view>
			</view>

			<view class="smart-flex smart-row flex-end">
				<view class="text">横向布局-居右</view>
				<view class="text">横向布局-居右</view>
			</view>

			<view class="smart-flex smart-row">
				<view class="text flex-1">横向布局-平均分布</view>
				<view class="text flex-1">横向布局-平均分布</view>
			</view>

			<view class="smart-flex smart-row space-between">
				<view class="text">横向布局-两端对齐</view>
				<view class="text">横向布局-两端对齐</view>
			</view>

			<view class="smart-flex smart-row">
				<view class="text fixed-width-small">固定宽度</view>
				<view class="text flex-1">自动占满</view>
			</view>

			<view class="smart-flex smart-row wrap">
				<view class="text wrap-item">一行显示不全wrap拆行</view>
				<view class="text wrap-item">一行显示不全wrap拆行</view>
				<view class="text wrap-item">一行显示不全wrap拆行</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>

</style>